<template>
  <div class="category-container">
    <!-- 分类列表 -->
    <nav class="category-nav">
      <ul>
        <li
            v-for="category in categories"
            :key="category"
            @click="filterByCategory(category)"
            :class="{ active: selectedCategory === category }"
        >
          {{ category }}
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
import {ref} from 'vue';

// 模拟 20 个分类
const categories = ref([
  '全部', 'Vue', 'Django', 'Python', '前端', 'React', 'Node.js', 'TypeScript',
  'JavaScript', 'CSS', 'HTML', '后端', '数据库', 'DevOps', '机器学习',
  '人工智能', '数据结构', '算法', '设计模式', '工具'
]);

const selectedCategory = ref('全部');

// 切换分类
const filterByCategory = (category) => {
  selectedCategory.value = category;
  console.log('当前分类:', category);
};
</script>

<style scoped>
.category-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.category-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 分类之间的间距 */
}

.category-nav li {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #e3f2fd;
  color: #1a73e8;
  transition: background-color 0.3s ease,
  color 0.3s ease;
  flex: 1 1 auto; /* 允许分类项自动调整宽度 */
  text-align: center;
  min-width: 100px; /* 每个分类的最小宽度 */
}

.category-nav li.active {
  background-color: #1a73e8;
  color: white;
}

.category-nav li:hover {
  background-color: #90caf9;
}
</style>